<template>
	<a-table :columns="columns" :data-source="tableData" :pagination="false"
		:scroll="{ x: '80%', y: TABLE_SCROLL_HEIGHT }" rowKey="id" :customRow="customRow" :row-selection="rowSelection" >
		<template #index="{ index }">{{ index + 1 }}</template>
		<template #operation="{ record }">
			<div class="operation">
				<a @click.stop="Onoperation('look', record)" class="look">预览</a>
				<a @click.stop="Onoperation('delete', record)" class="del">删除</a>
			</div>
		</template>
	</a-table>
</template>

<script lang="ts" setup>
	import { ref, computed } from "vue";
	import useGetTableScrollHeight from "@/utils/useGetTableScrollHeight";
	
	defineProps({
		tableData: {
			type: Array,
			default() {
				return [];
			},
		},
	});
	const EMITS = defineEmits(["operation"]);
	const TABLE_SCROLL_HEIGHT = useGetTableScrollHeight();
	
	const columns = [
		{ title: "序号", dataIndex: "index", ellipsis: true,slots: { customRender: "index" } },
		{ title: "项目名称", dataIndex: "name", ellipsis: true, },
		{ title: "科室", dataIndex: "department_name", ellipsis: true, },
		{ title: "患者姓名", dataIndex: "userName", ellipsis: true, },
		{ title: "联系方式", dataIndex: "phone", ellipsis: true, },
		{ title: "测评时间", dataIndex: "doctor", ellipsis: true, },
		{ title: "审核", dataIndex: "createTime", ellipsis: true, },
		{ title: "操作", dataIndex: "operation", width: 300,align: "center", slots: { customRender: "operation" } },
	];
	const selectedRowKeysval = ref<any>([]);
	const selectedRowsval = ref<any>([]);
	
	function selectRow(record: any){	// 点击行选中
		const selectedRowKeys = selectedRowKeysval.value;
		let selectedRows = selectedRowsval.value;
		if (selectedRowKeys.indexOf(record.id) >= 0) {
			selectedRowKeys.splice(selectedRowKeys.indexOf(record.id), 1);
			selectedRows = selectedRows.filter(
				(item: any) => item.id != record.id
			);
		} else {
			selectedRowKeys.push(record.id);
			selectedRows.push(record);
		}
		selectedRowKeysval.value = selectedRowKeys;
		selectedRowsval.value = selectedRows;
	};
	
	const customRow = (record: any,) => {
		return {
			onClick: () => {
				selectRow(record);
			},
		};
	};
	
	const rowSelection = computed(() => {
		return {
			selectedRowKeys: selectedRowKeysval.value,
			selectedRows: selectedRowsval.value,
			onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
				selectedRowKeysval.value = selectedRowKeys;
				selectedRowsval.value = selectedRows;
			},
			preserveSelectedRowKeys: true
		};
	});
	
	const Onoperation = (index, row) => {
		EMITS("operation", index, row);
	};
	
	defineExpose({ selectedRowsval });
</script>

<style>
</style>